* {
	padding: 0;
	margin: 0;
	// 禁止元素被选中
	user-select: none;
}

body {
	// 弹性布局 让页面元素垂直+水平居中
	display: flex;
	justify-content: center;
	align-items: center;
	// 让页面占浏览器可视区域的高度
	height: 100vh;
	background-color: #f8f9ff;
}

ul {
	// 去除小黑点
	list-style: none;
}

// 定义公共颜色
@lightColor: #cdd5f7;
@darkColor: #646b8a;
@activeColor: #6b5bfd;

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 600px;
	// 内容列表
	.content {
		display: flex;
		// 允许换行
		flex-wrap: wrap;
		li {
			display: flex;
			// 主轴向下
			flex-direction: column;
			// 两端对齐
			justify-content: space-between;
			align-items: center;
			width: 100px;
			height: 100px;
			padding: 10px;
			i {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70px;
				height: 70px;
				// 圆角
				border-radius: 8px;
				font-size: 30px;
				color: @darkColor;
				background-color: #fff;
				// 鼠标移入变小手
				cursor: pointer;
				// 过渡
				transition: all 0.3s;
				// 阴影
				box-shadow: 0 16px 32px rgba(90, 100, 130, 0.1);
				&:hover {
					color: @activeColor;
					// 放大1.2倍
					transform: scale(1.2);
				}
			}
			p {
				font-size: 13px;
				color: @lightColor;
			}
		}
	}
	// 分页列表
	.pagination {
		display: flex;
		align-items: center;
		height: 50px;
		margin: 30px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 16px 32px rgba(90, 100, 130, 0.1);
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25px;
			height: 25px;
			margin: 10px;
			font-size: 14px;
			border-radius: 5px;
			transition: all 0.3s;
			// 左右按钮
			&.page-btn {
				// 默认都为不可点击态
				color: @lightColor;
				font-size: 22px;
				&.isClick {
					// 可点击态
					color: @darkColor;
					cursor: pointer;
					&:hover {
						color: #fff;
						background-color: @activeColor;
					}
				}
			}
			// 数字按钮
			&.page-number {
				color: @darkColor;
				cursor: pointer;
				&:hover {
					color: #fff;
					// 文字加粗
					font-weight: bold;
					background-color: @activeColor;
				}
				// 选中状态
				&.active {
					color: #fff;
					// 文字加粗
					font-weight: bold;
					background-color: @activeColor;
					// 鼠标变为默认箭头
					cursor: default;
				}
			}
			// 省略号按钮
			&.page-dot {
				color: @lightColor;
				font-size: 18px;
				cursor: pointer;
				&:hover {
					color: @activeColor;
				}
				&::after {
					content: "more_horiz";
				}
				// 左边
				&.page-dot-prev:hover {
					&::after {
						content: "first_page";
					}
				}
				// 右边
				&.page-dot-next:hover {
					&::after {
						content: "last_page";
					}
				}
			}
		}
	}
}
